<template>
  <div class="dashboard">
    <div class="chart-container" ref="onlineUsersChart"></div>
    <div class="chart-container" ref="userStatsChart"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 数据模拟
const onlineUsersData = [120, 200, 150, 80, 70, 110, 130];
const userStatsData = {
  activeUsers: 3000,
  newUsers: 150,
  totalUsers: 5000,
};

// 在线人数统计图表配置
const onlineUsersChart = ref<HTMLDivElement | null>(null);
const userStatsChart = ref<HTMLDivElement | null>(null);

const initOnlineUsersChart = () => {
  if (onlineUsersChart.value) {
    const chart = echarts.init(onlineUsersChart.value);
    chart.setOption({
      title: {
        text: '在线人数统计',
      },
      tooltip: {},
      xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {},
      series: [
        {
          name: '在线人数',
          type: 'bar',
          data: onlineUsersData,
        },
      ],
    });
  }
};

const initUserStatsChart = () => {
  if (userStatsChart.value) {
    const chart = echarts.init(userStatsChart.value);
    chart.setOption({
      title: {
        text: '用户量统计',
        subtext: '实时数据',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '用户量统计',
          type: 'pie',
          radius: '50%',
          data: [
            { value: userStatsData.activeUsers, name: '活跃用户' },
            { value: userStatsData.newUsers, name: '新用户' },
            { value: userStatsData.totalUsers, name: '总用户' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    });
  }
};

onMounted(() => {
  initOnlineUsersChart();
  initUserStatsChart();
});
</script>

<style scoped lang="less">
.dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;

  .chart-container {
    width: 45%;
    height: 400px;
    margin-bottom: 20px;
  }
}
</style>
